<template>
  <table class="v-table">
    <tbody>
      <tr
        v-for="(item, index) in propValue.data"
        :key="index"
        :class="{
          stripe: propValue.stripe && index % 2,
          bold: propValue.thBold && index === 0,
        }"
      >
        <td v-for="(e, i) in item" :key="i">{{ e }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import request from '@/utils/request'
import OnEvent from '../common/OnEvent'

export default {
  extends: OnEvent,
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    request: {
      type: Object,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cancelRequest: null,
    }
  },
  created() {
    if (this.request) {
      this.cancelRequest = request(this.request, this.propValue, 'data')
    }
  },
  beforeDestroy() {
    this.request && this.cancelRequest()
  },
}
</script>

<style lang="scss" scoped>
.v-table {
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;

  td {
    border: 1px solid #ebeef5;
    height: 40px;
    width: 60px;
    padding: 10px;
  }

  .bold {
    font-weight: bold;
  }

  .stripe {
    background-color: #fafafa;
  }
}
</style>
